<template>
    <div class="report">
        <div class="commonSearch">
            <div :class="['commonContent',isCollapse ? '' : 'isShowMore']">
                <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <tree-select @getId="getId"></tree-select>
                    </el-form-item>
                    <el-form-item label="时间">
                        <customSelect @getTime='getTime' @handleClear='handleClear' :clearable='true'  @changeCollapse='changeCollapse'></customSelect>
                    </el-form-item>
                    <el-form-item label="设备">
                        <el-select v-model="searchForm.deviceId" filterable>
                            <el-option v-for="item in deviceSnList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <my-button type="primary" icon="el-icon-search" size="mini"
                    style="flex-shirk:0;height:28px;width:73px;margin-left:20px" v-throttle:200='searchList'>查询
                </my-button>
            </div>
        </div>

        <div class="btnSet">
            <my-button type="primary" size="mini" icon="el-icon-upload2" plain @btnClick='handleExportCountReport' >导出</my-button>
        </div>

        <!-- 表格 -->
        <table-list ref='tableList' :searchForm='searchForm'>
        </table-list>
    </div>
</template>

<script>
    import {
        deviceDropDown
    } from '@/api/lampController'
    import fileDownload from "js-file-download";
    import {exportCountReport} from '@/api/deviceController'
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                searchForm: {
                    deviceId: '',
                    startTime: '',
                    endTime: '',
                    page: 1,
                    limit: 10
                },
                deviceSnList:[],
                isCollapse: false
            }
        },
        components: {
            tableList
        },
        methods: {
            handleExportCountReport() {
                exportCountReport(this.searchForm).then(res => {
                    fileDownload(res, '计数报表' + new Date().dateFormat('yyyyMMddhhmmss'),
                    'application/vnd.ms-excel;charset=UTF-8')
                })
            },
            //分组id
            getId(groupId) {
                this.getDeviceDropDown({groupId})
            },
            //时间
            getTime(payload){
                const {timeStart,timeEnd} = payload
                this.searchForm.startTime = timeStart
                this.searchForm.endTime = timeEnd
            },
            handleClear(){
                this.searchForm.startTime = ''
                this.searchForm.endTime = ''
            },
            searchList() {
                this.$refs.tableList.getCountReport(this.searchForm)
            },
            changeCollapse(val){
                this.isCollapse = val
            },
            //设备下拉
            getDeviceDropDown: async function (data) {
                const res = await deviceDropDown(data)
                if (res.code == 200) {
                    const index = 0
                    this.searchForm.deviceId = res.data.length > 0 ? 
                        res.data[index].value : ''
                    this.deviceSnList = res.data
                    this.$refs.tableList.getCountReport(this.searchForm)
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .report {
        .commonSearch {
            position: relative;
            .commonContent {
                .el-form-item--mini.el-form-item {
                    width: 33%;

                    /deep/ .el-select {
                        width: 100%;
                    }
                }
            }

            .isShowMore {
                height: 40px;
                overflow: hidden;
            }
        }

        .btnSet {
            display: flex;
            padding: 20px 0;
            justify-content: space-between;
        }
    }
</style>